import {Component, OnInit} from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'ngx-radar',
  templateUrl: './radar.component.html',
  styleUrls: ['../index.component.css']
})
export class RadarComponent implements OnInit {

  options: any = {};

  constructor() {
    //console.log(echarts);
  }

  ngOnInit() {

    this.initCharts();

  }

  initCharts() {
    const ec: any = echarts;
    let radarChart = ec.init(document.getElementById('radarChart'))
    let radarChartOption = {
      tooltip: {},
      legend: {
        data: ['预计用电', '实际用电']
      },
      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
          }
        },
        indicator: [
          {name: '部门1', max: 6500},
          {name: '部门2', max: 16000},
          {name: '部门3', max: 30000},
          {name: '部门4', max: 38000},
          {name: '部门5', max: 52000},
          {name: '部门6', max: 25000}
        ]
      },
      series: [{
        name: '预计 vs 实际',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
          {
            value: [4300, 10000, 28000, 35000, 50000, 19000],
            name: '预计用电'
          },
          {
            value: [5000, 14000, 28000, 31000, 42000, 21000],
            name: '实际用电'
          }
        ]
      }]
    };
    radarChart.setOption(radarChartOption);
  }

}
